<template>
	<view class="container">
		<search-box @gotoSearch="gotoSearch"></search-box>
		<scroll-view scroll-x scroll-with-animation class="tab-view-x" :scroll-left="scrollLeft">
			<view
				v-for="(item, index) in tabbarX"
				:key="index"
				class="tab-bar-item-x"
				:class="[currentTabX == index ? 'active-x' : '']"
				:data-current="index"
				@tap.stop="swichNavX"
			>
				<text class="tab-bar-title">{{ item.categoryName }}</text>
			</view>
		</scroll-view>
		<swiper class="bottom-container" :current="currentTabX" duration="500" @change="switchTabX">
			<swiper-item v-for="(itemX, indexX) in tabbarX" :key="indexX">
				<view class="swiper-item">
					<scroll-view scroll-y scroll-with-animation class="tab-view-y" :scroll-top="scrollTop">
						<view
							v-for="(item, index) in tabbar[indexX]"
							:key="index"
							class="tab-bar-item-y"
							:class="[currentTabY == index ? 'active-y' : '']"
							:data-current="index"
							:data-id="item.id"
							@tap.stop="swichNavY"
						>
							<text>{{ item.categoryName }}</text>
						</view>
					</scroll-view>
					<view class="right-box">
						<mescroll-uni  :fixed="false" :down="downOption" :up="upOption" @up="upCallback">
							<view class="page-view" v-for="(_item, _index) in content" :key="_index">
								<yxyl-common :type="_item.itemStyle" :rowData="_item.items"></yxyl-common>
							</view>
						</mescroll-uni>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import tuiTabs from '@/components/tui-tabs/tui-tabs';
import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';
import searchBox from '@/components/search-box/search-box.vue';
import MescrollUni from 'mescroll-uni';
import yxylCommon from '@/components/yxyl-common/yxyl-common.vue';
export default {
	
	components: { tuiTabs, faIcon, searchBox, MescrollUni, yxylCommon },
	data() {
		return {
			tabbarX: [],
			tabbar: [],
			content: [],
			bottomHeight: '', //屏幕高度
			currentTabX: 0, //预设当前项的值,
			currentTabY: 0,
			scrollTop: 0, //tab标题的滚动条位置,
			scrollLeft: 0, //tabX标题的滚动条位置
			categoryId: '',
			mescroll: null,
			downOption: {
				use: false // 是否启用下拉刷新; 默认true,
			},
			//上拉加载的常用配置
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true

				noMoreSize: 2, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					use: false
				},
				textNoMore: '---没有了---'
			}
		};
	},
	onLoad: function(options) {
		var that = this;
		this.bindCategory().then(() => {
			// #ifdef H5
			that.$wechat.share({
				link: that.$handlerAppMessagePath()
			});
			// #endif
		});
	},
	onShow() {
		// console.log('分类' + window.location.href);
	},
	onShareAppMessage(e) {
		return {
			path: this.$handlerAppMessagePath()
		};
	},
	
	watch: {
		categoryId() {
			this.content = [];
			if (this.mescroll) {
				this.mescroll.resetUpScroll();
			} else {
				this.bindAlbum();
			}
		}
	},
	methods: {
		// 滚动切换标签样式
		switchTabX: function(e) {
			this.currentTabX = e.detail.current;
			this.currentTabY = 0;
			this.checkCorX();
			
			this.categoryId = this.tabbar[this.currentTabX][0]?this.tabbar[this.currentTabX][0].id:'';
		},
		// 点击标题切换当前页时改变样式
		swichNavX: function(e) {
			let cur = e.currentTarget.dataset.current;
			if (this.currentTabX == cur) {
				return false;
			} else {
				this.currentTabX = cur;
			}
		},
		//判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCorX: function() {
			if (this.currentTabX > 3) {
				//这里距离按实际计算
				this.scrollLeft = 200 * (this.currentTabX / 3);
			} else {
				this.scrollLeft = 0;
			}
		},
		// 点击标题切换当前页时改变样式
		swichNavY: function(e) {
			let cur = e.currentTarget.dataset.current;
			if (this.currentTabY == cur) {
				return false;
			} else {
				this.currentTabY = cur;

				this.categoryId = e.currentTarget.dataset.id;
				this.checkCorY();
			}
		},
		//判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCorY: function() {
			let that = this;

			if (that.currentTabY > 7) {
				that.scrollTop = 500;
			} else {
				that.scrollTop = 0;
			}
		},

		gotoSearch: function() {
			uni.navigateTo({
				url: '../search/search'
			});
		},
		bindCategory() {
			var that = this;
			return this.$http
				.request({
					url: 'api/Album/GetMultiAlbumCategory',
					data: {
						CategoryLevel: 1
					}
				})
				.then(res => {
					res.forEach((item, index) => {
						that.tabbarX.push({ categoryName: item.categoryName, id: item.id });
						that.tabbar[index] = [];
						item.children.forEach((sortItem, sortIndex) => {
							that.tabbar[index].push({ categoryName: sortItem.categoryName, id: sortItem.id });
						});
					});
					this.categoryId = res[0].children[0].id;
				});
		},
		async bindAlbum() {
			var that = this;

			var result = await this.$http.request({
				url: 'api/Album/GetAlbumsNew',
				data: {
					AlbumCategoryId: that.categoryId || '',
					SkipCount: that.content.length,
					MaxResultCount: 30
				}
			});
			this.content = this.content.concat(result);
			return result.length;
		},
		async upCallback(mescroll) {
		
			try {
				var Count = await this.bindAlbum();
				mescroll.endSuccess(Count, Count > 0);
			} catch (e) {
				// 失败隐藏下拉加载状态
				mescroll.endErr();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #fcfcfc;
}

/* 左侧导航布局 start*/
/* 隐藏scroll-view滚动条*/
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.searchbox {
	width: 100%;
	height: 92rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}
.searchbox::after {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #d2d2d2;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}
.search-input {
	width: 100%;
	height: 60rpx;
	background: #f1f1f1;
	border-radius: 30rpx;
	font-size: 26rpx;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 20px;
}
.search-text {
	padding-left: 16rpx;
}
// 横向分类
.tab-view-x::before {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}
.tab-view-x {
	width: 100%;
	height: 100rpx;
	overflow: hidden;
	box-sizing: border-box;
	position: fixed;
	top: 92rpx;
	left: 0;
	z-index: 99;
	background: #fff;
	white-space: nowrap;
}
.tab-bar-item-x {
	padding: 0;
	height: 100rpx;
	min-width: 80rpx;
	line-height: 100rpx;
	margin: 0 28rpx;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
}
.active-x {
	border-bottom: 6rpx solid #f44336;
	.tab-bar-title {
		color: #f44336 !important;
	}
}
.tab-bar-title {
	color: #000 !important;
	font-size: 30rpx;
	font-weight: bold;
}
.bottom-container {
	position: fixed;
	width: 100%;
	top: 192rpx;
	height: calc(100% - 192rpx - var(--window-bottom));
	.swiper-item {
		display: flex;
		height: 100%;
	}
}
// 纵向分类
.tab-view-y {
	height: 100%;
	width: 25vw;
	z-index: 10;
}
.tab-bar-item-y {
	width: 100%;
	height: 110rpx;
	background: #f6f6f6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #444;
	font-weight: 400;
}
.active-y {
	position: relative;
	color: #000;
	font-size: 30rpx;
	font-weight: 600;
	background: #fcfcfc;
}
.active-y::before {
	content: '';
	position: absolute;
	border-left: 8rpx solid #e41f19;
	height: 30rpx;
	left: 0;
}
/* 左侧导航布局 end*/
.right-box {
	width: 75vw;
	height: 100%;
	z-index: 10;
}
.page-view {
	width: 100%;
	// overflow: hidden;
	// padding-top: 20rpx;
	// padding-right: 200rpx;
	// box-sizing: border-box;
	// padding-bottom: env(safe-area-inset-bottom);
}
</style>
